<template>
  <div class="background ">

    <div class="login_box">
      <div class="account">
        <input v-model="userName" placeholder="请输入用户名" type="text">
      </div>
      <div class="password">
        <input v-model="password" placeholder="请输入密码" type="password">
      </div>

      <button
          v-loading="loading"
          element-loading-background="rgba(255, 255, 255, 0.5)"
          @click="loginClick"
      >登 录
      </button>
    </div>

  </div>
</template>

<script>
export default {
  name: "LoginIndex",
  data() {
    return {
      loading: false,
      userName: null,
      password: null
    }
  },
  mounted() {
    this.$notify({
      title: '提示:',
      message: '输入用户名后即可登录，项目所有loading均为模拟请求',
    })
  },
  methods: {
    loginClick() {
      if (!this.userName) return this.$message.error('必须输入用户名')
      this.loading = true
      this.$store.dispatch('user/login').then(r => {
        this.loading = false
        this.$store.commit('login', r)
        this.$router.push({
          name: 'Home'
        })
      })
      this.$store.dispatch('user/setUserName', this.userName)
    }
  }
}
</script>

<style lang="scss" scoped>
.background {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;

  .login_box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35vw;
    height: 40vh;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    border-radius: 4vh;
    box-shadow: 0 0 5px #d7d7d733;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    div {
      width: 70%;
      height: 10vh;

      input {
        width: 100%;
        height: 50%;
        background: rgba(255, 255, 255, 0.2);
        border: none;
        border-radius: 8px;
        padding-left: 2vw;
        color: #ffffff88;
      }

      input:focus {
        outline: none;
      }
    }

    button {
      width: 25vw;
      height: 5vh;
      background: linear-gradient(to right, #FFC0CB, #00FFFF);
      border: none;
      border-radius: 8px;
      font-size: 2.5vh;
      color: #fff;
    }
  }
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
</style>
